<template>
  <div class="product_detail" @click="shareTip = false">
    <notice class="not"></notice>
    <div class="content">
      <div class="content_img_box">
        <div class="img_icon">
          <van-icon :name="$img('product_detail_back.png')" size=".6rem" @click="goBack"/>
          <!-- <van-icon :name="$img('product_detail_share.png')" size=".6rem" @click="share" v-if="canShowShare"/> -->
          <span class="sharebtn" @click="share" v-if="canShowShare">分享</span>
          <!-- <van-icon :name="$img('product_detail_share.png')" size=".6rem" @click="minshare" v-if="minShare"/> -->
          <span class="sharebtn" @click="minshare" v-if="minShare">分享</span>
        </div>
        <van-swipe :autoplay="3000" indicator-color="white" class="product_img">
          <van-swipe-item v-for="(item, index) in detailData.slider_image" :key="index">
            <van-image :src="item">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error></template>
            </van-image>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="product_info_box">
        <div class="price_box">
          <span>￥{{detailData.price}}</span>
          <s>￥{{detailData.ot_price}}</s>
          <div>已售{{detailData.sort}}件</div>
        </div>
        <div class="shop_activity_tag">
          <!-- <van-tag color="#e0261b1a" text-color="#FE0000">店铺券699减50</van-tag>
          <van-tag color="#e0261b1a" text-color="#FE0000">购买得积分</van-tag> -->
          <van-tag color="#e0261b1a" text-color="#FE0000" v-if="detailData.is_bargain">支持砍价</van-tag>
        </div>
        <p class="van-multi-ellipsis--l2 product_title">{{detailData.store_name}}</p>
      </div>
      <div class="activity_address_box" v-if="1">
        <van-cell is-link v-if="0">
          <template slot="title">
            <span class="custom-title">活动</span>
            <van-tag color="#FE0000" plain class="activity_tag">领券</van-tag>
            <van-tag color="#FE0000" plain class="activity_tag">699减50</van-tag>
          </template>
        </van-cell>
        <van-cell v-if="0">
          <template slot="title">
            <span class="custom-title">保障</span>
            <span class="guarantee_text">店铺预售，付款后15天内发货送装入户·保价险 ·年质保</span>
          </template>
        </van-cell>
        <van-cell is-link v-if="1">
          <template slot="title">
            <span class="custom-title">发货地</span>
            <div class="address">
              <span class="address_detail van-ellipsis">{{merchant_info.province}}&nbsp;&nbsp;{{merchant_info.city}}</span>
              <!-- <span class="stock_status">现货</span> -->
            </div>
          </template>
        </van-cell>
      </div>
      <div class="assemble_box" v-if="pinkList.length > -1">
        <van-cell value="查看全部" is-link @click="tgshow = true">
          <template slot="title">
            <span class="custom-title">{{pinkList.length}}人在拼团, 可直接参与</span>
          </template>
        </van-cell>
        <div class="assemble_user">
          <div class="user_item" v-for="(item, index) in pinkList" :key="index">
            <van-image
              round
              width=".72rem"
              height=".72rem"
              :src="item.teamLeader.avatar"
            />
            <div class="user_name">{{item.teamLeader.nickname}}</div>
            <div class="how_success">
              <div class="q">还差{{item.remain}}人拼成</div>
              <div class="end_time">
                <div>剩余</div>
                <van-count-down
                  :millisecond="true"
                  :time="item.stop_time - time"
                  format="HH:mm:ss"
                />
              </div>
            </div>
            <div class="buy_now" @click="showOnePink(item.id)">立刻购买</div>
          </div>
        </div>
      </div>
      <div class="comment_box" v-if="replyCount > 0">
        <van-cell value="查看全部" is-link @click="plshow = true">
          <template slot="title">
            <span class="custom-title">宝贝评论({{replyCount}})</span>
          </template>
        </van-cell>
        <div class="user_comment" v-for="(item, index) in reply" :key="index">
          <div class="user_info">
            <van-image
              round
              width=".52rem"
              height=".52rem"
              :src="item.user.avatar"
            />
            <div class="user_info_right">
              <div>
                <span>{{item.user.nickname}}</span>
                <!-- <van-icon name="ellipsis" size=".36rem"/> -->
                <span @click="JB">举报</span>
              </div>
              <div>{{item.add_time}}</div>
            </div>
          </div>
          <div class="van-multi-ellipsis--l2 comment_content">{{item.comment}}</div>
        </div>
      </div>
      <div class="shop_box" @click.stop="toShopHome(merchant_info.user_id)">
        <div class="shop_info">
          <img class="shop_cover" :src="merchant_info.logo">
          <div class="shop_info_right">
            <van-cell :title="merchant_info.name" is-link :border="false"/>
            <div class="shop_evaluate">
              <div>好评度 {{merchant_info.good_count}}</div>
              <div>卖家服务 {{merchant_info.serve_count}}</div>
              <div>物流服务 {{merchant_info.express_count}}</div>
            </div>
          </div>
        </div>
        <div class="shop_recommend">
          <van-cell value="查看全部" is-link :border="false">
            <template slot="title">
              <span class="custom-title">店铺推荐</span>
            </template>
          </van-cell>
          <div class="recommend_product">
            <div class="product_item" v-for="(item, index) in merchant_info.product" :key="index" @click.stop="toDetail(item.id)">
              <van-image :src="item.image">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error></template>
              </van-image>
              <p class="van-multi-ellipsis--l2 product_title">{{item.store_name}}</p>
              <div class="price_line">￥{{item.price}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="product_detail" v-if="detailData.description !== ''">
        <div class="md" v-html="detailData.description"></div>
      </div>
    </div>
    <van-goods-action class="product_detail_footer">
      <van-goods-action-icon :icon="$img('product_detail_shop.png')" text="店铺" @click="toShopHome(merchant_info.user_id)"/>
      <van-goods-action-icon :icon="$img('product_detail_kf.png')" @click="toChat()" text="客服" />
      <van-goods-action-icon v-if="!detailData.userCollect" :icon="$img('product_detail_like.png')" text="收藏" @click="collectProduct"/>
      <van-goods-action-icon v-else class="unlike" :icon="$img('product_detail_unlike.png')" text="收藏" @click="unCollectProduct"/>
      <van-goods-action-button type="danger" text="单独购买" color="linear-gradient(#FE0000b3,#FF2A56b3)" @click="show = true; pinkId = ''"/>
      <van-goods-action-button type="danger" text="发起拼单" color="linear-gradient(#FE0000,#FF2A56)" @click="tgsukshow = true; pinkId = ''"/>
    </van-goods-action>
    <van-sku
      v-model="show"
      :sku="suk"
      :goods="goods"
      :goods-id="goodid"
      :quota="0"
      :quota-used="0"
      @buy-clicked="onBuyClicked"
      :show-add-cart-btn="false"
      :reset-selected-sku-on-hide="true"
      :reset-stepper-on-hide="true"
      :close-on-click-overlay="true"
      :initial-sku="initialSku"
    >
      <template slot="sku-stepper">
        <div class="sku_stepper">
          <div>购买数量:</div>
          <van-stepper v-model="selectedNum" :step="1" :decimal-length="1" :min="0.1" :input-width="$remToPx(0.8)"/>
        </div>
      </template>
    </van-sku>
    <van-sku
      v-model="tgsukshow"
      :sku="tgsuk"
      :goods="goods"
      :goods-id="goodid"
      :quota="0"
      :quota-used="0"
      @buy-clicked="onBuyPinkClicked"
      :show-add-cart-btn="false"
      :reset-selected-sku-on-hide="true"
      :reset-stepper-on-hide="true"
      :close-on-click-overlay="true"
      :initial-sku="tginitialSku"
    >
      <template slot="sku-stepper">
        <div class="sku_stepper">
          <div>购买数量:</div>
          <van-stepper v-model="selectedNum" :step="1" :decimal-length="1" :min="0.1" :input-width="$remToPx(0.8)"/>
        </div>
      </template>
    </van-sku>
    <van-overlay :show="loadingShow" class="loading">
      <van-loading size="2.4rem" :vertical="true"></van-loading>
    </van-overlay>
    <van-popup v-model="tgshow">
      <div class="tglist">
        <!-- <div class="listtitle"><van-icon name="cross" />正在拼单</div> -->
        <van-nav-bar
          title="正在拼单"
          @click-left="tgshow = false"
        >
          <template slot="left"><van-icon name="cross" size=".4rem" color="#333333" /></template>
        </van-nav-bar>
        <div class="item_box">
          <div class="item" v-for="(item, index) in tglist" :key="index">
            <van-image
              class="cover"
              round
              fit="cover"
              width=".72rem"
              height=".72rem"
              :src="item.avatar"
            />
            <div class="item_msg">
              <div class="item_top">
                <span class="user_name van-ellipsis">{{item.nickname}}</span>
                <span class="need_user">还差{{item.remain}}人</span>
              </div>
              <div class="item-bottom">
                <span><van-count-down millisecond :time="item.stop_time - time" format="仅剩 HH:mm:ss" /></span>
              </div>
            </div>
            <div class="totg">去拼单</div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="plshow">
      <div class="pllist">
        <!-- <div class="listtitle"><van-icon name="cross" />正在拼单</div> -->
        <van-nav-bar
          title="评论"
          @click-left="plshow = false"
        >
          <template slot="left"><van-icon name="cross" size=".4rem" color="#333333" /></template>
        </van-nav-bar>
        <div class="item_box">
          <div class="user_item" v-for="(item, index) in plList" :key="index">
            <div class="user_info">
              <van-image
                round
                width=".52rem"
                height=".52rem"
                :src="item.user.avatar"
              />
              <div class="user_info_right">
                <div>
                  <span>{{item.user.nickname}}</span>
                  <!-- <van-icon name="ellipsis" size=".36rem"/> -->
                  <span @click="JB">举报</span>
                </div>
                <div>{{item.add_time}}</div>
              </div>
            </div>
            <div class="comment_content">{{item.comment}}</div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="jointgshow">
      <div class="jointgbox" v-if="pinkDetail !== ''">
        <van-nav-bar
          :title="`参与${pinkDetail.teamLeader.nickname}的拼单`"
          @click-left="jointgshow = false"
        >
          <template slot="left"><van-icon name="cross" size=".4rem" color="#333333" /></template>
        </van-nav-bar>
        <div>
          <div class="ptmsg">
            <span>仅剩{{pinkDetail.number_count}}个名额，</span>
            <van-count-down millisecond :time="pinkDetail.stop_time - time" format=" HH:mm:ss 后结束" />
          </div>
          <div class="ptuser">
            <van-image
              class="cover"
              round
              fit="cover"
              width=".96rem"
              height=".96rem"
              :src="pinkDetail.teamLeader.avatar"
            />
            <van-image
              class="cover"
              round
              fit="cover"
              width=".96rem"
              height=".96rem"
              :src="$img('who.png')"
            />
          </div>
          <div class="joinpt" v-if="from !== 'order'" @click="sureJoinPT(pinkDetail.id)">参与拼团</div>
          <div class="joinpt" v-else @click.stop="shareTip = true">邀请拼团</div>
        </div>
      </div>
    </van-popup>
    <img v-if="shareTip" class="shareTip" :src="$img('share.png')" width="100%">
  </div>
</template>

<script>
export default {
  data () {
    return {
      time: new Date(),
      detailData: '',
      pinkList: [],
      suk: {},
      tgsuk: {},
      tgsukshow: false,
      show: false,
      goods: {},
      merchant_info: '',
      selectedNum: 1,
      initialSku: {},
      tginitialSku: {},
      loadingShow: false,
      replyCount: 0,
      reply: [],
      canShowShare: false,
      goodid: '',
      tgshow: false,
      lasttime: 30 * 60 * 60 * 1000,
      tglist: [],
      goodpinkid: '', // 商品团购id
      pinkId: '', // 团id
      pinkDetail: '',
      jointgshow: false,
      from: '',
      shareTip: false,
      plshow: false,
      plList: [],
      minShare: false
    }
  },
  methods: {
    goBack () {
      if (this.$route.query.from) {
        if (this.$store.state.pl === 'ANDROID') {
          AndroidJsBridge.finish()
        } else if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('popVC')
        }
      } else {
        if (this.$store.state.pl === 'H5') {
          this.$router.go(-1)
        } else if (this.$store.state.pl === 'ANDROID') {
          AndroidJsBridge.finish()
        } else if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('popVC')
        }
      }
    },
    toChat () {
      if (this.$store.state.pl === 'H5') {
        const u = {
          nickname: this.merchant_info.name,
          id: this.merchant_info.user_id,
          avatar: this.merchant_info.logo
        }
        this.$store.commit('SET_IMUSER', u)
        this.$router.push({
          name: 'chatpage'
        })
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('chatting', {
          targetId: `${this.merchant_info.user_id}`,
          tradeName: this.detailData.store_name,
          price: this.detailData.price
        })
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.chat(`${this.merchant_info.user_id}`, `${this.merchant_info.name}`, `${this.detailData.store_name}`, `${this.detailData.price}`)
      }
    },
    getDetail (id) {
      this.$axios.get(`/api/product/detail/${id}`).then(res => {
        if (res.status === 200) {
          this.detailData = res.data.storeInfo
          this.pinkList = res.data.pink_list
          this.merchant_info = res.data.merchant_info
          this.goods = {
            title: this.detailData.store_name,
            picture: this.detailData.slider_image[0]
          }
          this.reply = res.data.reply
          this.replyCount = res.data.replyCount
          this.goodpinkid = res.data.combination_info.id
          this.getTGList(res.data.combination_info.id)
          this.$shareInit(this.detailData.image, this.detailData.store_name, this.detailData.store_info, window.location.protocol + '//' + window.location.hostname + `/productDetail/${this.$route.params.id}${this.$route.query.pinkId ? `?pinkId=${this.$route.query.pinkId}` : ''}`)
          if (this.$store.state.pl === 'ANDROID') {
            AndroidJsBridge.shareID(`${this.$route.params.id}`)
          } else if (this.$store.state.pl === 'IOS') {
            window.iosCallHandler('shareID', `${this.$route.params.id}`)
          }
        } else {
          this.$dialog({ message: res.msg })
        }
      })
    },
    collectProduct () {
      this.$axios.post('/api/collect/add', {
        id: this.detailData.id,
        category: 'product'
      }).then(res => {
        if (res.status === 200) {
          this.$dialog({ message: '收藏成功' })
          this.detailData.userCollect = true
        }
      })
    },
    unCollectProduct () {
      this.$axios.post('/api/collect/batch_cancel_collect', {
        id: this.$route.params.id
      }).then(res => {
        if (res.status === 200) {
          this.$dialog({ message: '取消收藏成功' })
          this.detailData.userCollect = false
        }
      })
    },
    getSUK () {
      this.$axios.get(`/api/get_product_attr_info/${this.$route.params.id}`).then(res => {
        if (res.status === 200) {
          this.suk = res.data
          for (let x in this.suk.list) {
            this.suk.list[x].price = this.suk.list[x].price * 100
          }
          this.initialSku[this.suk.tree[0].k_s] = this.suk.list[0][this.suk.tree[0].k_s]
          if (this.suk.tree.length === 2) {
            this.initialSku[this.suk.tree[1].k_s] = this.suk.list[0][this.suk.tree[1].k_s]
          }
        }
      })
    },
    getTGSUK () {
      this.$axios.get(`/api/get_product_attr_info/${this.$route.params.id}`, {
        params: {
          pink: 1
        }
      }).then(res => {
        if (res.status === 200) {
          this.tgsuk = res.data
          for (let x in this.tgsuk.list) {
            this.tgsuk.list[x].price = this.tgsuk.list[x].price * 100
          }
          this.tginitialSku[this.tgsuk.tree[0].k_s] = this.tgsuk.list[0][this.tgsuk.tree[0].k_s]
          if (this.tgsuk.tree.length === 2) {
            this.tginitialSku[this.tgsuk.tree[1].k_s] = this.tgsuk.list[0][this.tgsuk.tree[1].k_s]
          }
        }
      })
    },
    toShopHome (id) {
      this.$router.push(`/shophome/${id}`)
    },
    toDetail (id) {
      this.getDetail(id)
    },
    getTGList (id) {
      this.$axios.get(`/api/combination/getPinkList/${id}`).then(res => {
        if (res.status === 200) {
          this.tglist = res.data.list
        }
      })
    },
    // 单买
    onBuyClicked (skuData) {
      this.loadingShow = true
      this.addCart(skuData, 0).then(cartid => {
        this.confirmOrder(cartid).then(res => {
          if (res.status === 200) {
            this.loadingShow = false
            this.$router.push({ name: 'CreateOrder', query: { id: cartid, orderKey: res.data.orderKey } })
          } else {
            this.$toast(res.msg)
            this.loadingShow = false
          }
        })
      })
    },
    // 团购
    onBuyPinkClicked (skuData) {
      this.loadingShow = true
      this.addCart(skuData, 1).then(cartid => {
        this.confirmOrder(cartid).then(res => {
          if (res.status === 200) {
            this.loadingShow = false
            this.$router.push({ name: 'CreateOrder', query: { id: cartid, orderKey: res.data.orderKey, combinationId: this.goodpinkid, pinkId: this.pinkId } })
          } else {
            this.$toast(res.msg)
            this.loadingShow = false
          }
        })
      })
    },
    addCart (skuData, ispink) {
      return new Promise(resolve => {
        if (ispink && this.pinkId === '') {
          this.pinkId = 0
        }
        this.$axios.post('/api/cart/add', {
          productId: skuData.goodsId,
          cartNum: this.selectedNum,
          new: 1,
          uniqueId: skuData.selectedSkuComb.id,
          combinationId: ispink ? this.goodpinkid : ''
        }).then(res => {
          if (res.status === 200) {
            resolve(res.data.cartId)
          }
        })
      })
    },
    confirmOrder (cartid) {
      return new Promise(resolve => {
        this.$axios.post('/api/order/confirm', {
          cartId: cartid
        }).then(res => {
          if (res.status === 200) {
            resolve(res)
          }
        })
      })
    },
    share () {
      if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.onClickShare()
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('onClickShare')
      }
    },
    pinkLastTime (last) {
      let _lastTime = last - this.time
      return _lastTime
    },
    getOnePinkDetail (pinkid) {
      this.$axios.get(`/api/pink/getPinkDetail/${pinkid}`).then(res => {
        if (res.status === 200) {
          this.pinkDetail = res.data
          this.jointgshow = true
        }
      })
    },
    showOnePink (pink) {
      this.getOnePinkDetail(pink)
    },
    sureJoinPT (id) {
      this.pinkId = id
      this.tgsukshow = true
    },
    JB () {
      this.$axios.get('/api/product/report').then(res => {
        this.$toast('举报成功')
      })
    },
    getPLList () {
      this.$axios.get(`/api/product/product_reply/${this.$route.params.id}`).then(res => {
        if (res.status === 200) {
          this.plList = res.data
        }
      })
    },
    minshare () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否将商品分享到社交圈'
      }).then(_ => {
        this.$router.push(`/societyrelease?id=${this.$route.params.id}`)
      }).catch(__ => {
        // on cancel
      })
    }
  },
  created () {
    if (this.$route.params.id > -1) {
      this.getDetail(this.$route.params.id)
      this.getSUK()
      this.getTGSUK()
      this.goodid = this.$route.params.id
    } else {
      this.$dialog({ message: '商品不存在或已下架' })
      return false
    }
    if (localStorage.getItem('from') && localStorage.getItem('from') === 'order') {
      this.from = localStorage.getItem('from')
      localStorage.removeItem('from')
    }
    if (this.$route.query.pinkId) {
      this.getOnePinkDetail(this.$route.query.pinkId)
    }
    if (this.$store.state.pl === 'ANDROID') {
      window.showShareBtn = _ => {
        this.canShowShare = true
      }
    } else if (this.$store.state.pl === 'IOS') {
      window.iosRegisterHandler('showShareBtn').then(_ => {
        this.canShowShare = true
      })
    } else {
      if (!this.$isWxBrowser()) {
        this.canShowShare = true
      } else {
        this.minShare = true
      }
    }
    this.getPLList()
  }
}
</script>

<style lang="scss">
.product_detail{
  background: #f0f0f0;
  min-height: calc(100%);
  padding-top: .48rem;
  .sharebtn{
    background: rgb(255, 215, 40);
    font-size: .26rem;
    color: #FF2A1F;
    display: inline-flex;
    width: 1rem;
    height: .6rem;
    align-items: center;
    justify-content: center;
    border-radius: .3rem 0 0 .3rem;
  }
  .content{
    padding-bottom: 1.2rem;
    .content_img_box{
      position: relative;
      width: 7.5rem;
      height: 7.5rem;
      .img_icon{
        box-sizing: border-box;
        padding: .26rem 0 .26rem .32rem;
        width: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        display: flex;
        justify-content: space-between;
      }
      .product_img{
        width: 7.5rem;
        height: 7.5rem;
        .van-image{
          width: 7.5rem;
          height: 7.5rem;
        }
      }
    }
    .product_info_box{
      background: #ffffff;
      border-radius: 0 0 .08rem .08rem;
      .price_box{
        display: flex;
        align-items: flex-end;
        padding: .2rem .24rem 0 .32rem;
        span{
          color: #fe0000;
          font-size: .28rem;
          flex: 0 1 auto;
        }
        s{
          color: #cccccc;
          font-size: .24rem;
          flex: 1;
          margin-left: .16rem;
        }
        div{
          color: #999999;
          font-size: .24rem;
          flex: 0 1 auto;
        }
      }
      .shop_activity_tag{
        display: flex;
        align-items: center;
        padding: 0 .26rem;
        margin-top: .14rem;
        span{
          margin-right: .06rem;
        }
      }
      .product_title{
        color: #111010;
        font-size: .24rem;
        padding: .24rem .32rem;
      }
    }
    .activity_address_box{
      background: #ffffff;
      margin-top: .24rem;
      border-radius: .08rem;
      overflow: hidden;
      .custom-title{
        margin-right: .3rem;
        color: #999999;
        font-size: .24rem;
        vertical-align: top;
      }
      .activity_tag{
        margin-right: .16rem;
      }
      .guarantee_text{
        display: inline-block;
        color: #333333;
        font-size: .24rem;
        max-width: 3.16rem;
        word-break: break-all;
      }
      .van-cell:not(:last-child)::after{
        border: unset;
      }
      .address{
        display: inline-flex;
        flex-direction: column;
        .address_detail{
          color: #333333;
          font-size: .24rem;
          max-width: 4.9rem;
        }
        .stock_status{
          font-size: .24rem;
          color: #fe0000;
        }
      }
    }
    .assemble_box{
      background: #ffffff;
      margin-top: .24rem;
      border-radius: .08rem;
      overflow: hidden;
      .van-cell__value{
        span{
          color: #FF2A1F;
        }
      }
      .van-cell__right-icon{
        color: #FF2A1F;
      }
      .assemble_user{
        .user_item{
          display: flex;
          padding: .24rem .32rem .24rem 0;
          margin-left: .32rem;
          align-items: center;
          border-bottom: .02rem solid #f0f0f0;
          .user_name{
            color: #333333;
            font-size: .28rem;
            flex: 1;
            margin-left: .16rem;
          }
          .how_success{
            display: flex;
            flex-direction: column;
            flex: 0 1 auto;
            .q{
              color: #333333;
              font-size: .2rem;
              text-align: right;
            }
            .end_time{
              color: #999999;
              font-size: .2rem;
              font-weight: 500;
              display: flex;
              &>div:first-child{
                line-height: .4rem;
              }
              .van-count-down{
                color: #999999;
                font-size: .2rem;
                font-weight: 500;
              }
            }
          }
          .buy_now{
            background: linear-gradient(#FE0000, #FF2A56);
            border-radius: .16rem;
            width: 1.44rem;
            height: .64rem;
            text-align: center;
            line-height: .64rem;
            color: #ffffff;
            font-size: .24rem;
            flex: 0 1 auto;
            margin-left: .12rem;
          }
        }
        .user_item:last-child{
          border: unset;
        }
      }
    }
    .comment_box{
      background: #ffffff;
      margin-top: .24rem;
      border-radius: .08rem;
      overflow: hidden;
      .van-cell__value{
        span{
          color: #FF2A1F;
        }
      }
      .van-cell:not(:last-child)::after{
        border: unset;
      }
      .van-cell__right-icon{
        color: #FF2A1F;
      }
      .user_comment{
        display: flex;
        flex-direction: column;
        padding-right: .32rem;
        margin-left: .32rem;
        margin-top: .34rem;
        border-bottom: .02rem solid #f0f0f0;
        .user_info{
          display: flex;
          align-items: center;
          .user_info_right{
            margin-left: .16rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            &>div:first-child{
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              span{
                color: #999999;
                font-size: .24rem;
              }
            }
            &>div:last-child{
              color: #999999;
              font-size: .2rem;
            }
          }
        }
        .comment_content{
          color: #333333;
          font-size: .24rem;
          margin-top: .22rem;
          margin-bottom: .26rem;
        }
      }
      .user_comment:last-child{
        border: unset;
      }
    }
    .shop_box{
      background: #ffffff;
      margin-top: .24rem;
      border-radius: .08rem;
      overflow: hidden;
      padding: .32rem;
      .shop_info{
        display: flex;
        .shop_cover{
          width: 1.2rem;
          height: 1.2rem;
          border-radius: .08rem;
        }
        .shop_info_right{
          flex: 1;
          margin-left: .16rem;
          padding: .06rem 0 .14rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .van-cell{
            padding: 0;
          }
          .shop_evaluate{
            display: flex;
            color: #999999;
            font-size: .24rem;
            &>div{
              margin-right: .16rem;
            }
          }
        }
      }
    }
    .shop_recommend{
      margin-top: .32rem;
      .van-cell{
        padding: 0;
      }
      .custom-title{
        color: #111010;
        font-weight: bold;
        font-size: .24rem;
      }
      .van-cell__value{
        span{
          color: #FF2A1F;
          font-size: .24rem;
        }
      }
      .van-cell__right-icon{
        color: #FF2A1F;
      }
      .recommend_product{
        display: flex;
        justify-content: space-between;
        .product_item{
          margin-top: .16rem;
          width: 2.18rem;
          display: flex;
          flex-direction: column;
          .van-image__img{
            width: 2.18rem;
            height: 2.18rem;
            border-radius: .08rem;
          }
          .product_title{
            color: #111010;
            font-size: .22rem;
            margin-top: .12rem;
            height: .64rem;
          }
          .price_line{
            color: #111010;
            font-size: .24rem;
            margin-top: .12rem;
          }
        }
      }
    }
    .product_detail{
      background: #ffffff;
      margin-top: .24rem;
      border-radius: .08rem;
      overflow: hidden;
      padding: .32rem;
      .md{
        & img{
          max-width: 100% !important;
        }
      }
    }
  }
  .product_detail_footer{
    .van-icon__image{
      width: .48rem;
      height: .48rem;
    }
    .van-button{
      border-radius: unset !important;
      margin: 0 !important;
      height: .96rem;
    }
    .unlike{
      color: #FF2A1F;
    }
    .van-goods-action-icon{
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }
  }
  .not{
    position: fixed;
    top: 0 !important;
    width: 100%;
  }
  .sku_stepper{
    display: flex;
    padding: .32rem .28rem 0;
    justify-content: space-between;
  }
  .loading{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100 !important;
    .van-loading__text{
      font-size: .36rem;
      font-weight: bold;
    }
  }
  .tglist{
    width: 5.56rem;
    height: 6.7rem;
    border-radius: .16rem !important;
    .listtitle{
      font-size: .32rem;
      color: #333333;
      padding: .26rem 0;
      text-align: center;
      border-bottom: .02rem solid #f6f6f6;
    }
    .item_box{
      height: 5.78rem;
      overflow: scroll;
      .item{
        display: flex;
        padding: .2rem .34rem .2rem .24rem;
        align-items: center;
        .cover{
          flex: 0 1 auto;
          margin-right: .14rem;
        }
        .item_msg{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .item_top{
            .user_name{
              max-width: 1rem;
              color: #333333;
              font-size: .24rem;
            }
            .need_user{
              color: #666666;
              font-size: .24rem;
              margin-left: .08rem;
            }
          }
          .item_bottom{
            & *{
              color: #999999 !important;
              font-size: .24rem;
            }
          }
        }
        .totg{
          flex: 0 1 auto;
          width: 1.32rem;
          height: .56rem;
          background: linear-gradient(92deg,rgba(254,0,0,1) 0%,rgba(255,42,86,1) 100%);
          border-radius: .16rem;
          color: #ffffff;
          font-size: .24rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .jointgbox{
    width: 5.56rem;
    height: 4.22rem;
    border-radius: .16rem !important;
    .ptmsg{
      color: #333333;
      font-size: .24rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ptuser{
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 1.68rem;
      margin-top: .34rem;
      margin-bottom: .28rem;
    }
    .joinpt{
      width: 4.8rem;
      height: .88rem;
      border-radius: .08rem;
      background: #e0261b;
      color: #ffffff;
      font-size: .32rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }
  }
  .shareTip{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    background: #66666662;
    height: 100%;
  }
  .pllist{
    width: 5.56rem;
    height: 6.7rem;
    border-radius: .16rem !important;
    .item_box{
      height: 5.78rem;
      overflow: scroll;
    }
    .user_item{
      display: flex;
      flex-direction: column;
      padding-right: .32rem;
      margin-left: .32rem;
      margin-top: .34rem;
      border-bottom: .02rem solid #f0f0f0;
      .user_info{
        display: flex;
        align-items: center;
        .user_info_right{
          margin-left: .16rem;
          flex: 1;
          display: flex;
          flex-direction: column;
          &>div:first-child{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            span{
              color: #999999;
              font-size: .24rem;
            }
          }
          &>div:last-child{
            color: #999999;
            font-size: .2rem;
          }
        }
      }
      .comment_content{
        color: #333333;
        font-size: .24rem;
        margin-top: .22rem;
        margin-bottom: .26rem;
      }
    }
  }
}
</style>
